<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>美食数据统计与视频展示</title>
    <link rel="stylesheet" href="css/Second.css">
</head>

<body>
<div class="container">
    <header class="header">
        <div class="logo">🍜 美食数据统计与视频展示</div>
        <div class="time-display" id="showTime"></div>
        <button onclick="window.location.href='index.html'">返回美食地图</button>
    </header>
    <div class="side-panel">
        <!-- 左侧：公告和视频区域 -->
        <div class="left-content">
            <div class="announcement">
                <h2 class="chart-title">系统公告</h2>
                <p>欢迎使用中国美食分布可视化系统！本系统展示了中国各地的特色美食分布情况。</p>
                <p>使用说明：</p>
                <ul>
                    <li>该数据为虚拟数据</li>
                    <li>右侧信息框展示该地区代表菜品虚拟百分比</li>
                </ul>
            </div>
            <div class="video-container">
                <h2 class="chart-title">美食纪录片</h2>
                <iframe src="https://player.bilibili.com/player.html?bvid=BV1EKSvY8Ep3&high_quality=1&danmaku=0"
                        frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
        <!-- 右侧：图表区域 -->
        <div class="right-content">
            <div class="chart-panel">
                <h2 class="chart-title">区域销量对比</h2>
                <div class="chart-container" id="barChart"></div>
            </div>
            <div class="chart-panel">
                <h2 class="chart-title">品类趋势分析</h2>
                <div class="chart-container" id="lineChart"></div>
            </div>
            <div class="chart-panel">
                <h2 class="chart-title">最受欢迎菜系</h2>
                <div class="chart-container" id="pieChart"></div>
            </div>
        </div>
    </div>
    <div class="footer">
        <p>© 2023 中国美食文化研究中心 | 数据更新时间: 2023年12月</p>
    </div>
</div>
<div id="mask" style="display:none"></div>
<div id="leftInfo"><button id="closeLeft">关闭</button></div>
<div id="rightInfo"><button id="closeRight">关闭</button></div>

<script src="js/jquery.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/china.js"></script>
<script src="js/Sec_index.js"></script>
</body>

</html>